<div id="viewer-container" ></div>
<script>
  let viewer = undefined

  function generatePosition(num,isAdd) {
    let list = []
    for (let i = 0; i < num; i++) {
      let lng = 121.49536592256028 + Math.random() * 0.04 * (isAdd ? 1 :-1)
      let lat = 31.241616722278213 + Math.random() * 0.04 * (isAdd ? 1 :-1)
      list.push({lng,lat})
    }
    return list
  }

  function loadCircle(){
    let layer_circle = new DC.PrimitiveLayer('layer-circle').addTo(viewer)
    let positions = generatePosition(5)
    positions = positions.concat(generatePosition(5,true))
    positions.forEach(item=>{
      let circle= new DC.ScanCirclePrimitive(item,200)
      circle.setStyle({
        speed: 8 * Math.random() ,
        color:DC.Color.GREEN
      })
      layer_circle.addOverlay(circle)
    })
  }

  function loadVLine (){
    let layer = new DC.PrimitiveLayer('vLine_layer')
    viewer.addLayer(layer)
    let positions = generatePosition(50,true)
    positions = positions.concat(generatePosition(50,))
    positions.forEach(item=>{
      let position = DC.Position.fromObject(item)
      let end = position.copy()
      end.alt = 5000 * Math.random()
      let line = new DC.FlowLinePrimitive([position,end],0.5)
      line.setStyle({
        speed: 6 * Math.random(),
        color: DC.Color.fromCssColorString("rgb(141,172,172)"),
        percent:0.1,
        gradient:0.01
      })
      layer.addOverlay(line)
    })
  }

  function loadBuild(){
    let layer = new DC.TilesetLayer('layer_build').addTo(viewer)
    let build = new DC.Tileset(
      '//resource.dvgis.cn/data/3dtiles/ljz/tileset.json',
      {skipLevels:true}
    )
    let fs = `
       varying vec3 v_positionEC;
       void main(void){
           vec4 position = czm_inverseModelView * vec4(v_positionEC,1); // 位置
           float glowRange = 100.0; // 光环的移动范围(高度)
           gl_FragColor = vec4(0.1,  0.1, 0.2, 1.0) ; // 颜色
           // 动态光环
           float time = fract(czm_frameNumber / 360.0);
           time = abs(time - 0.5) * 2.0;
           float diff = step(0.005, abs(clamp(position.z / glowRange, 0.0, 1.0) - time));
           gl_FragColor.rgb += gl_FragColor.rgb * (1.0 - diff);
       }
      `
    build.setCustomShader(fs)
    layer.addOverlay(build)
  }

  function loadRiver(){
    let layer_river = new DC.GeoJsonLayer('layer_river','examples/data/hpj.geojson').addTo(viewer)
    layer_river.eachOverlay(item => {
      DC.Util.merge(item.polygon,{
        outline:false,
        material: new DC.WaterMaterialProperty({
          normalMap:'../assets/icon/waterNormalsSmall.jpg',
          frequency: 1000.0,
          animationSpeed:  0.01,
          amplitude: 100,
          specularIntensity:  1
        })
      })
    })
  }

  function loadRoad(){
    let layer_road = new DC.GeoJsonLayer('layer_road','examples/data/road_ljz.geojson')
    let colors=[
      DC.Color.fromCssColorString("rgb(34,80,186)"),
      DC.Color.fromCssColorString("rgb(247,155,251)"),
      DC.Color.fromCssColorString("rgb(97,234,181)"),
      DC.Color.fromCssColorString("rgb(203,77,46)")
    ]
    layer_road.eachOverlay(item =>{
      if(item.polyline){
        DC.Util.merge(item.polyline,{
          material: new  DC.PolylineTrailMaterialProperty({
            speed: 10,
            color: colors[Math.floor(4*Math.random())]
          }),
          width:2
        })
      }
    })
    viewer.addLayer(layer_road)
  }

      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let viewer = new DC.Viewer('viewer-container')
    let  baseLayer = DC.ImageryLayerFactory.createBaiduImageryLayer({
      style: 'dark',
      crs:'WGS84'
    })
     baseLayer.defaultBrightness = 0.05
    viewer.addBaseLayer( baseLayer)
    viewer.setOptions({
      enableFxaa:true
    })
    viewer.use(new DC.Effect())
    viewer.effect.bloom.enable = true
    viewer.flyToPosition("121.49437363,31.2070558,2705.19,0.6,-43.06",()=>{
      loadRiver()
      loadCircle()
      loadVLine()
      loadBuild()
      loadRoad()
    })
  }


</script>
